<template>
	<view class="message page-main">
		<view class="title">
			<a @click="$router.back()"><span class="arrowLeft"></span></a>
			<span class="name">{{$t('user.msgdetail')}}</span>
			<span></span>
		</view>
		<view class="messageDetail">
			<view class="title">{{info.title}}</view>
			<view class="messageDetail_title">
				<span class="f13"><strong class="img"><img src="@/static/images/user/tx.png" alt="" srcset=""></strong>{{$t('user.star')}}</span>
				<span class="f12">{{info.createTime}}</span>
			</view>
			<view class="conetnt" v-html="info.content">
			</view>
		</view>
	</view>
</template>

<script>
import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {
				id: '',
				pageType: 'list',
				info: {}
			}
		},
		methods: {
			async getNoticInfo() {
				let params = {
					id: this.id,
					token: getToken()
				}
				const {code , data} = await this.$api.home.getNotic(params)
				if(code === 200) {
					this.info = data
				}
			},
			goBack() {
				this.$router.push('/pages/home/index')
			}
		},
		onLoad(option) {
			this.id = option.id
			this.pageType = option.type
		},
		mounted() {
			this.getNoticInfo()
		}
	}
</script>

<style lang="scss" scoped>
.message {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	background:#fff url(@/static/images/team/teambg.png) no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		.arrowLeft{
			display: inline-block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 36rpx/60rpx PingFangSC;
			color: #fff !important;
		}
	}
	.messageDetail{
		width:100%;
		padding:24rpx 0;
		margin:272rpx 0 0 0;
		box-sizing: border-box;
		height:calc(100vh - 160rpx);
		background: rgba(255,255,255,0.1);
		border-radius: 10rpx;
		.title{
			width:100%;
			height:200rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			font-size:48rpx;
			line-height:48rpx;
			color: #FFFFFF;
			word-break: break-all;
		}
		.messageDetail_title{
			width:100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			margin-bottom:40rpx;
			
			.img{
				float: left;
				width:48rpx;
				height:48rpx;
				background: #2446CA;
				// border: 0.89px solid #FFFFFF;
				border-radius: 32rpx;
				margin-right:20rpx;
				img{
					width:48rpx;
					height:48rpx;
					background-size: 100%;
				}
			}
			span:nth-child(1){
				color:#333;
			}
			span:nth-child(2){
				color:#666;
			}
		}
		.conetnt{
			width:100%;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #333;
			letter-spacing: 0;
			line-height:56rpx;
		}
	}
	
}
</style>
